<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-09-12 13:43:30
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2024-03-12 09:33:54
 * @FilePath: \mould\src\views\QualityGridManage\BehaViorManage\quality-G-R-Manage\onlineRecordWork\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tableInfo" id="tableInfoBox">
    <TableLyout>
      <template v-slot:serchbox>
        <publicForm
          ref="publicForm"
          @yj_searchForm="yj_searchForm"
          lableWidth="110px"
          :formObj="searchObj"
          :formData="getList"
          @selectChange="selectTime"
          @selectChanges="selectChange"
        >
        </publicForm>
      </template>

      <template v-slot:tabcom>
        <div class="tableInfo">
          <!-- 折线图 -->
          <div class="echartsBox">
            <div class="tableInfoBox">
              <div style="margin-right: 10px">{{ limitation.title }}</div>
              <el-input
                v-model="limitation.lowerLimit"
                :placeholder="limitation.lowerText"
              ></el-input>
              ~
              <el-input
                v-model="limitation.upperLimit"
                :placeholder="limitation.upperText"
              ></el-input>
              <el-button
                style="margin-left: 10px"
                type="primary"
                @click="clickInput(limitation)"
              >
                分析
              </el-button>
            </div>

            <div class="lineChart" v-show="groupNmu != 0">
              <div class="line_Chart">
                <lineEcharts
                  :commonData="lineChartData"
                  :echartsTitle="echartsTitle"
                  :xName="xName"
                  :yName="yName"
                ></lineEcharts>
              </div>

              <div class="line_Text">
                组数：{{ groupNmu }}&emsp;&emsp; 平均值：{{
                  tableData.averageValue
                }}&emsp;&emsp; 标准差：{{
                  tableData.standardDeviation
                }}&emsp;&emsp; 变异系数：{{ tableData.variationNum }}
              </div>

              <div
                class="lineChartList"
                v-for="(item, index) in lineChartList"
                :key="index"
              >
                <div class="lineChartListBox">{{ item.con1 }}</div>
                <div class="lineChartListBox">{{ item.con2 }}</div>
                <div class="lineChartListBox">{{ item.con3 }}</div>
                <div class="lineChartListBox">{{ item.con4 }}</div>
              </div>
            </div>
            
            <div class="lineChart" v-show="groupNmu == 0">
              <img src="@/assets/img/undata.png" alt="" srcset="" />
              <div>暂无数据</div>
            </div>
          </div>

          <!-- 柱状图 -->
          <div class="echartsBox">
            <div class="tableInfoBox tableInfoBox1">
              <div style="margin-right: 10px">{{ Histogram.title }}</div>
              <el-input
                v-model="Histogram.section"
                :placeholder="Histogram.sectionText"
              ></el-input>

              <el-button
                style="margin-left: 10px"
                type="warning"
                @click="clickHistogram(Histogram)"
              >
                分析
              </el-button>
            </div>

            <div class="lineChart" v-show="groupNmu != 0">
              <div class="line_Chart">
                <barEcharts
                  :commonData="barChartData"
                  :echartsTitle="barChartTitle"
                  :xName="xBarName"
                  :yName="yBarName"
                ></barEcharts>
              </div>

              <div class="HistogramChart">
                <div
                  class="HistogramList"
                  v-for="(v, i) in HistogramChartList"
                  :key="i"
                >
                  <div
                    class="HistogramChartBox"
                    v-for="(item, index) in v"
                    :key="index"
                    :style="{ width: histogramWidth }"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>

            <div class="lineChart" v-show="groupNmu == 0">
              <img src="@/assets/img/undata.png" alt="" srcset="" />
              <div>暂无数据</div>
            </div>
          </div>
        </div>
      </template>
    </TableLyout>
  </div>
</template>
<script src="./index.js"></script>
<style scoped lang="less">
@import "./index.less";
</style>
